<template>
  <el-row class="event-container">
    <el-row>
      <el-col :span="21">
        <h1 class="event-title">{{ $t('pageOverview.eventLogs') }}</h1>
      </el-col>
      <el-col :span="3">
        <a :href="href" :download="download">
          <el-button type="text">
            {{ $t('global.action.exportAll') }}
          </el-button>
        </a>
        <span>|</span>
        <router-link class="view-more-link" to="/diagnostic/event-logs">
          {{ $t('pageOverview.viewMore') }}
        </router-link>
      </el-col>
    </el-row>
    <el-row class="event-body">
      <el-col :span="13">
        <dl>
          <dt>{{ $t('pageOverview.criticalEvents') }}：</dt>
          <dd class="h3">
            {{ dataFormatter(criticalEvents.length) }}
            <!-- <status-icon status="danger" /> -->
            <i class="el-icon-error"></i>
          </dd>
        </dl>
        <dl>
          <dt>{{ $t('pageOverview.warningEvents') }}：</dt>
          <dd class="h3">
            {{ dataFormatter(warningEvents.length) }}
            <!-- <status-icon status="warning" /> -->
            <i class="el-icon-warning"></i>
          </dd>
        </dl>
        <dl>
          <dt>{{ $t('pageOverview.infoEvents') }}：</dt>
          <dd class="h3">
            {{ dataFormatter(normalEventsLength) }}
            <!-- <status-icon status="success" /> -->
            <i class="el-icon-success"></i>
          </dd>
        </dl>
      </el-col>
      <el-col :span="11">
        <div ref="chart" style="width: 400px; height: 220px"></div>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
import * as echarts from 'echarts';

export default {
  name: 'Events',
  mixins: [DataFormatterMixin],
  computed: {
    eventLogData() {
      return this.$store.getters['eventLog/allEvents'];
    },
    criticalEvents() {
      return this.eventLogData
        .filter((log) => log.severity === 'Critical')
        .map((log) => {
          return log;
        });
    },
    warningEvents() {
      return this.eventLogData
        .filter((log) => log.severity === 'Warning')
        .map((log) => {
          return log;
        });
    },
    normalEventsLength() {
      return (
        this.eventLogData.length -
        this.warningEvents.length -
        this.criticalEvents.length
      );
    },
    dataForExport() {
      return JSON.stringify(this.eventLogData);
    },
    href() {
      return `data:text/json;charset=utf-8,${this.dataForExport}`;
    },
    download() {
      let date = new Date();
      date =
        date.toISOString().slice(0, 10) +
        '_' +
        date.toString().split(':').join('-').split(' ')[4];
      let fileName = 'all_event_logs_';
      return fileName + date + '.json';
    },
  },
  created() {
    this.$store.dispatch('eventLog/getEventLogData').finally(() => {
      this.$root.$emit('overview-events-complete');
    });
  },
  mounted() {
    setTimeout(() => {
      this.initChart();
    }, 100);
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      const option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'right',
        },
        series: [
          {
            type: 'pie',
            radius: ['39%', '78%'],
            avoidLabelOverlap: false,
            data: [
              {
                value: this.warningEvents.length,
                name: this.$t('pageOverview.warningEvents'),
                itemStyle: { color: '#FFD700' },
              },
              {
                value: this.criticalEvents.length,
                name: this.$t('pageOverview.criticalEvents'),
                itemStyle: { color: '#DC143C' },
              },
              {
                value: this.normalEventsLength,
                name: this.$t('pageOverview.infoEvents'),
                itemStyle: { color: '#1E90FF' },
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };
      chart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.status-icon {
  vertical-align: text-top;
}
.event-container {
  border-radius: 5px;
  background-color: #fff;
  .el-row {
    padding: 20px 30px 0px;
  }
}
.event-container > .el-row:last-child {
  padding-bottom: 20px;
}
dl {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 10px;
  column-gap: 30px;
  margin-bottom: 30px;
}
dt {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
dd {
  margin-bottom: 0;
}
.event-body > .el-col:first-child {
  padding-left: 250px;
}
.el-icon-error {
  color: #dc143c;
}
.el-icon-warning {
  color: #ffd700;
}
.el-icon-success {
  color: #1e90ff;
}
.view-more-link {
  color: #409eff;
  text-decoration: none;
}
.el-button {
  font-size: 16px;
}
</style>
